<template>
  <div class="mf-bd ly_flex ly_flex_col">
    <div class="mf-search">
      <input-demo :dataObj="Data"></input-demo>
    </div>
    <div class="mf-table ly_flex_1">
      <el-card>
        <mf-table :columns="columns" :dataSource="dataSource" :hasExpand="true">
          <div slot="handleColumn">
            <el-table-column
              fixed="right"
              label="操作"
              width="180">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </div>
          <div slot="childColumn">
            <el-table-column
              fixed="right"
              label="操作"
              width="180">
              <template slot-scope="scope">
                <el-button @click="handleChildClick(scope.row)" type="text" size="small">修改</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </div>
          <div slot="pagination">
            <Pagination :page="meta" @click-page='changePage' @click-size="changeSize"></Pagination>
          </div>
        </mf-table>
      </el-card>
    </div>
    <Dialog :tittle="tittle" :width="width" :height="height">
      <div slot="content">
        <el-button>233</el-button>
      </div>
    </Dialog>
  </div>
</template>

<script>
import { getList } from '@/api/table'
import InputDemo from '../../components/inputDemo'
import MfTable from '../../components/table'
import Pagination from '../../components/Pagination'
import Dialog from '../../components/Dialog'
import {mapGetters} from "vuex"


export default {
  name: 'Dashboard',
  components: {
    InputDemo,
    MfTable,
    Pagination,
    Dialog
  },
  data() {
    return {
      listLoading: false,
      Data: {
        title: '选择资源属性进行过滤',
          data: [
            {name: '实例名',
              label: 'name',
              type: 'input',
              id: 1,
            },{name: '时间区间',
              label: 'date',
              type: 'dateTime',
              id: 2,
            },{name: '实例名状态',
              label: 'type',
              type: 'select',
              id: 3,
              data: [
                {label: '创建中',value: 1},
                {label: '运行中',value: 2},
                {label: '已关机',value: 3},
                {label: '待回收',value: 4}
              ]
            }
          ]
      },
      // 表格
      columns: [
        {
        hasSort: false,  //<Boolean> 是否排序
        isShow: true,  //<Boolean> 是否展示
        prop: 'name',   //<String>  对应属性名
        label: '姓名',  //<String>   表头标签
      },
        {
          hasSort: false,  //<Boolean> 是否排序
          isShow: true,  //<Boolean> 是否展示
          prop: 'date',   //<String>  对应属性名
          label: '日期',  //<String>   表头标签
        },
        {
          hasSort: false,  //<Boolean> 是否排序
          isShow: true,  //<Boolean> 是否展示
          prop: 'org',   //<String>  对应属性名
          label: '单位',  //<String>   表头标签
        },
        {
          hasSort: false,  //<Boolean> 是否排序
          isShow: true,  //<Boolean> 是否展示
          prop: 'id',    //<String>  对应属性名
          label: '身份证', //<String>   表头标签
        }],
        // 表格数据
      dataSource: [],
      // 页数
      meta:{
        page:0,
        total:10,
      },
      tittle:"Test",
      width:"40%",
      height:"1000px",

    }
  },
  created() {
    this.fetchData()
  },
  computed: {
    isVisible() {
      return this.$store.state.visible.isVisible
    }
  },
  watch: {
    
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getList().then(response => {
        this.dataSource = response.data.items
        this.listLoading = false
      })
    },
    // 点击父层修改
    handleClick(row){
      this.$store.dispatch('setIsvisible',true)
      console.log(row.id+"-------")
    },
    // 点击子层修改
    handleChildClick(row){
      console.log(row.id+"-------")
    },
    // 修改分页的当前第几页
    changePage(val) {
      console.log('当前是第'+val+'页')
    },
    changeSize(val) {
      console.log('每页有'+val+'条数据')
    },

    // 提交数据
    submitModule() {

    },
  }
}
</script>

<style lang="scss" scoped>
  .mf-bd {
    padding: 10px 30px;
    .mf-search {
      width: 80%;
      margin-bottom: 10px;
    }
    .mf-table {
      /deep/.el-card {
        /deep/.el-card__body {
          padding: 0;
        }
      }
    }
  }
</style>
